<template>
  <div>
    <el-cascader-panel :options="beanList" :props="panelProp" @change="panelChange" />
    <el-divider/>
    <el-form size="mini" label-position="right" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="beanName">
            <el-input v-model="entry.beanName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="namespace">
            <el-input v-model="entry.namespace"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="entry function">
            <el-input v-model="entry.func"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="id">
            <el-input v-model="entry.id"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="hasAnnotaion">
            <el-checkbox v-model="entry.hasAnnotaion"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="initTime">
            <el-input v-model="entry.initTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="retrunType">
            <el-input v-model="entry.returnClass"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="query count">
            <el-input v-model="entry.queryCount"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="success count">
            <el-input v-model="entry.successCount"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="error count">
            <el-input v-model="entry.errorCount"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="origin sql">
            <el-input type="textarea" v-model="entry.originSql" :autosize="{ minRows: 2, maxRows: 20}"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-row>
        <el-col>
          <el-button @click="getWorkStatus(entry)" size="mini">刷新状态</el-button>
          <el-button @click="clearWorkStatus(entry)" size="mini">清除记录</el-button>
        </el-col>
      </el-row>
      <el-divider/>
      <el-timeline>
        <el-timeline-item :timestamp="obj.beginQueryTime" placement="top" v-for="obj in entryWorkStatus">
          <el-form size="mini" label-position="right" label-width="150px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="request sql">
                  <el-input v-model="obj.beginQueryTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="request sql">
                  <el-input v-model="obj.endQueryTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="request time">
                  <el-input :value="`${obj.queryTime}ms / ${obj.queryTime/1000}s`"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="query index">
                  <el-input v-model="obj.queryIndex"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="query id">
                  <el-input v-model="obj.queryId"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="request sql">
                  <el-input type="textarea" v-model="obj.sql" :autosize="{ minRows: 2, maxRows: 20}"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-tag v-for="(val,key) in obj.allVal">{{ key }}={{ val }}</el-tag>
              </el-col>
            </el-row>
            <el-row v-if="obj.errorMessage != null">
              <el-col :span="24">
                <el-form-item label="error message">
                  <el-input v-model="obj.errorMessage"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="obj.errorStack != null">
              <el-col :span="24">
                <el-form-item label="error stack">
                  <el-input type="textarea" v-model="obj.errorStack" :autosize="{ minRows: 2, maxRows: 20}"/>
                </el-form-item>
              </el-col>
            </el-row>


          </el-form>
          <el-divider/>
        </el-timeline-item>
      </el-timeline>
    </div>


  </div>
</template>

<script lang="ts">
import {Vue, Component, Provide} from 'vue-property-decorator'
import AllService from '@/service/AllService'
import {ConfigureDTO} from '@/service/entity/ConfigureDTO'
import {EntryDTO} from '@/service/entity/EntryDTO';
import {WorkStatus} from "@/service/entity/WorkStatus";
import {ElCascaderPanelOption, ElCascaderPanelNode} from "@/components/element-ui/el-cascader-panel";

@Component
export default class index extends Vue {
  @Provide() configureList: Array<ConfigureDTO> = [];
  @Provide() workStatusList: Array<WorkStatus> = [];
  @Provide() beanList: Array<ElCascaderPanelOption> = [];
  @Provide() entry: EntryDTO = new EntryDTO();
  @Provide() entryWorkStatus: Array<WorkStatus> = [];

  @Provide() panelProp: Object = {
    lazy: true,
    lazyLoad: (node: ElCascaderPanelNode, resolve: Function) => {
      if (node.data?.type === 'beanName') {
        this.getConfigureAllNamespace(node.data, resolve);
      } else if (node.data?.type === 'nameSpace') {
        this.getAllEntry(node.data, resolve);
      }
    }
  };

  panelChange(node: Array<any>) {
    this.entry = node[node.length - 1];
    this.getWorkStatus(this.entry);
  }

  created() {
    var that = this;
    AllService.getAllConfigure().then(function (result: Array<ConfigureDTO>) {
      that.configureList = result;
      for (let dto of result) {
        let option: ElCascaderPanelOption = new ElCascaderPanelOption();
        option.label = dto.beanName;
        option.value = dto;
        option.type = 'beanName';
        that.beanList.push(option);
      }
    })
  }


  getConfigureAllNamespace(option: ElCascaderPanelOption, resolve: Function) {
    AllService.getConfigureAllNamespace(option.value).then(function (result: Array<ConfigureDTO>) {
      let options: Array<ElCascaderPanelOption> = [];
      for (let dto of result) {
        let optionResult: ElCascaderPanelOption = new ElCascaderPanelOption();
        optionResult.label = `${dto.namespace}(${dto.queryCount}|${dto.errorCount})`;
        optionResult.value = dto;
        optionResult.type = 'nameSpace';
        options.push(optionResult);
      }
      resolve(options);
    });
  }

  getAllEntry(data: ElCascaderPanelOption, resolve: Function) {
    AllService.getAllEntry(data.value).then(function (result: Array<EntryDTO>) {
      let options: Array<ElCascaderPanelOption> = [];
      for (let dto of result) {
        let optionResult: ElCascaderPanelOption = new ElCascaderPanelOption();
        optionResult.label = `${dto.id}(${dto.queryCount}|${dto.errorCount})`;
        optionResult.value = dto;
        optionResult.type = 'entry';
        optionResult.leaf = true;
        options.push(optionResult);
      }
      resolve(options);
    });
  }

  getWorkStatus(data: EntryDTO) {
    var that = this;
    AllService.getWorkStatus(data).then(function (result: Array<WorkStatus>) {
      that.entryWorkStatus = result;
    });
  }

  clearWorkStatus(data: EntryDTO) {
    var that = this;
    AllService.clearWorkStatus(data).then(function (result: null) {
      that.$message({
        message: '删除成功',
        type: 'success'
      });
      that.getWorkStatus(data);
    });
  }

}

</script>

<style scoped>

</style>